<template>
    <div>
        <h1 v-red>我是App</h1>
        <h1 v-bgColor="'yellowgreen'">我是App1</h1>
        <button @click="log1">打印111</button>
        <div>
            <p v-role>自定义指令1</p>
            <button @click="$destroy()">卸载App组件</button>
        </div>
    </div>
</template>

<script>
export default {
    name: "App",
    methods: {
        log1() {
            console.log(111);
        },
    },
    directives: {
        red(el) {
            el.style.background = "red";
        },
        bgColor(el, binding) {
            el.style.background = binding.value;
        },
    },
};
</script>

<style></style>
